<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form size="small" slot="query" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="审批人" style="width: 200px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.extFiled" clearable placeholder="选择业务范围" style="width: 136px">
					<el-option v-for="(item, index) in dictEnums['FLOW_TYPE']" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" :data="tableData" height="100%">
			<el-table-column label="序号" type="index" width="48" align="center"></el-table-column>
			<el-table-column label="业务范围" width="100" :formatter="returnOperRange" />
			<el-table-column label="流程名称" prop="name" min-width="240"></el-table-column>
			<el-table-column label="流程描述" prop="des" min-width="240"></el-table-column>
			<el-table-column label="发布状态" min-width="80">
				<template slot-scope="{ row }">
					<el-switch v-model="row.status" active-value="1" inactive-value="2" @change="handleSwitchChange($event, row.id)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="{ row }">
					<el-button size="medium" type="text" @click="handleNodeManage(row)">节点管理</el-button>
					<el-button size="medium" type="text" @click="handleOpenDialog(row)">编辑</el-button>
					<el-button size="medium" type="text" @click="handleDeleteData(row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data="flowData" @finish="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import { mapGetters } from 'vuex';
import { getFlowPageList, updateFlow, deleteFlow } from '@/api/approval/flowDefinition';
export default {
	components: { formDialog },
	data() {
		return {
			loading: false,
			activeName: '1',
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			tableData: [],
			flowData: {},
			formDialog: false
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	mounted() {
		this.queryTableData();
	},
	methods: {
		//获取审核任务数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await getFlowPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询审核任务数据
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//返回业务范围
		returnOperRange(data) {
			let flowTypes = this.dictEnums['FLOW_TYPE'];
			let attrs = { size: 'medium', disableTransitions: true };
			let info = flowTypes.find((n) => n.value === data.extFiled);
			return this.$createElement('ElTag', { attrs }, !info ? '--' : info.msg);
		},

		//修改发布状态
		async handleSwitchChange(status, id) {
			let params = { id, status };
			let result = await updateFlow(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('发布状态成功');
			}
		},

		//打开弹出框
		handleOpenDialog(data) {
			this.flowData = !data ? {} : { ...data };
			this.formDialog = true;
		},

		//删除流程
		handleDeleteData(id) {
			let that = this;
			that.$confirm('此操作将永久删除该流程, 是否继续?', '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(id);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除流程请求
		async deleteFlowRequest(id) {
			let result = await deleteFlow(id).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.$message.success('删除流程成功');
			}
		},

		//查看流程
		handleNodeManage(data) {
			this.$router.push(`/approval/flow/${data.code}`);
		}
	}
};
</script>

<style lang="scss" scoped></style>
